﻿
<!-- Main jumbotron for a primary marketing message or call to action -->
<!--<div class="jumbotron">
    <h1>AisinGioro</h1>
    <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
</div>-->

<div class="alert alert-warning" role="alert" ng-hide="main.serverList && main.serverList.length>0">{{main.nothingMessage}}</div>

<div class="panel panel-default my-panel" ng-repeat="server in main.serverList track by $index">
    <div class="panel-heading panel-heading-clicked" ng-click="toggleDetails($index)">
        <h3 class="panel-title"><span class="glyphicon" ng-class="server.heartBeatCss" aria-label="{{server.heartBeatText}}"></span> {{server.id}}</h3>
        <div class="dropdown my-panel-dropdown" uib-dropdown>
            <a href="javascript:;" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" uib-dropdown-toggle ng-click="stopBubbling($event)">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
            </a>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" uib-dropdown-menu>
                <li><a ui-sref="ping({ip:server.ip})">PING</a></li>
            </ul>
        </div>
    </div>
    <table class="table" ng-show="server.tableVisible">
        <tr>
            <td>CPU({{server.cpuProcessorCount}})</td>
            <td>
                <div class="progress">
                    <div ng-class="loadProgressCss(server.cpuLoadList[0].num)" class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" ng-style="{'width': server.cpuLoadList[0].num+'%'}">
                        {{server.cpuLoadList[0].num}}%
                    </div>
                </div>
            </td>
            <td><a href="javascript:;" ng-click="showCpuReport($index)"><span class="glyphicon glyphicon-stats"></span></a></td>
        </tr>
        <tr>
            <td>Memory</td>
            <td>
                <div class="progress">
                    <div class="my-progress-time" ng-show="server.memoryPhysical">{{server.memoryPhysical}}GB</div>
                    <div ng-class="loadProgressCss(server.memoryLoadList[0].num)" class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" ng-style="{'width': server.memoryLoadList[0].num+'%'}">
                        {{server.memoryLoadList[0].num}}%
                    </div>
                </div>
            </td>
            <td><a href="javascript:;" ng-click="showMemoryReport($index)"><span class="glyphicon glyphicon-stats"></span></a></td>
        </tr>
        <tr>
            <td>Disk</td>
            <td colspan="2">
                <div class="progress my-box-progress" ng-repeat="disk in server.diskList track by $index">
                    <div class="my-progress-time">{{disk.label}}{{disk.size}}GB</div>
                    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ng-style="{'width': disk.diskLoad+'%'}">
                        {{(disk.size-disk.freeSpace).toFixed(1)}}GB
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Website</td>
            <td colspan="2">
                <button type="button" class="btn btn-sm my-label-btn" ng-class="loadButtonCss(conn.total)" ng-repeat="conn in server.connectionList track by $index">{{conn.siteName}} <span>{{conn.total}}</span></button>
            </td>
        </tr>
    </table>
</div>

<script type="text/ng-template" id="serverModal">
    <div class="modal-header">
        <button type="button" class="close" aria-label="Close" ng-click="dismissModal()"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Statistics</h4>
    </div>
    <div class="modal-body">
        <div class="progress" ng-repeat="load in vm.loadValueList track by $index">
            <div class="my-progress-time">{{load.time}}</div>
            <div class="progress-bar" ng-class="load.css" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" ng-style="{'width': load.num+'%'}">
                {{load.num}}%
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" type="button" ng-click="dismissModal()">Close</button>
    </div>
</script>